<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./js/echarts.min.js"></script>
    <script src="./js/jshx.echarts.1.0.js"></script>
    <title>柱状图demo</title>
    <style>
        .demo {
            margin: 50px auto;
            width: 80%;
            height: 600px;
        }

        #main5 {
            width: 60%;
            height: 450px;
        }

        #main6 {
            width: 40%;
            height: 300px;
        }

        #button {
            margin-left: 20%;
            margin-top: 50px;
        }

        #button1 {
            margin-top: 50px;
        }

        #button2 {
            margin-top: 50px;
        }

        #main {
            width: 40%;
            height: 400px;
        }
    </style>
</head>

<body>
    <div id="main" class="demo"></div>
    <hr>
    <button id="button">点此新增随机数据putData</button>
    <button id="button1">点此新增一条新类目putData</button>
    <button id="button2">点此清除数据clearData</button>
    <button id="button3">点此增加x轴范围addX</button>
    <div id="main1" class="demo"></div>
    <hr>
    <div id="main2" class="demo"></div>
    <hr>
    <div id="main3" class="demo"></div>
    <hr>
    <div id="main4" class="demo"></div>
    <div id="main5" class="demo"></div>
    <div id="main6" class="demo"></div>
    <hr>
    <div id="main7" class="demo"></div>
    <hr>
    <div id="main8" class="demo"></div>
    <script>
        var main = new HxChartBar('main', ['第一天', '第二天', '第三天', '第四天', '第五天', '第六天']);
        main.init();
        main.putData('类目一', '第二天', Math.ceil(Math.random() * 10));
        main.putData('类目一', '第五天', Math.ceil(Math.random() * 10));
        main.putData('类目一', '第四天', Math.ceil(Math.random() * 10));
        // main.showAvarage();
        main.showExtreme();
        main.addX('第七天');

        var category = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
        var main1 = new HxChartBar('main1', category, '点击上方按钮新增数据:putData');
        main1.init();
        for (var i = 0; i < 3; i++) {
            main1.putData('邮件营销', category[i], Math.ceil(Math.random() * 10));
            main1.putData('联盟广告', category[i], Math.ceil(Math.random() * 10));
            main1.putData('视频广告', category[i], Math.ceil(Math.random() * 10));
            main1.putData('直接访问', category[i], Math.ceil(Math.random() * 10));
            main1.putData('搜索引擎', category[i], Math.ceil(Math.random() * 10));
        }
        var num = 3;
        document.getElementById('button').addEventListener("click", function () {
            main1.putData('邮件营销', category[num], Math.ceil(Math.random() * 10));
            main1.putData('联盟广告', category[num], Math.ceil(Math.random() * 10));
            main1.putData('视频广告', category[num], Math.ceil(Math.random() * 10));
            main1.putData('直接访问', category[num], Math.ceil(Math.random() * 10));
            main1.putData('搜索引擎', category[num], Math.ceil(Math.random() * 10));
            num++;
        })
        var num1 = 0;
        document.getElementById('button1').addEventListener("click", function () {
            main1.putData('新类目', category[num1], Math.ceil(Math.random() * 10));
            num1++;
        })
        document.getElementById('button2').addEventListener("click", function () {
            main1.clearData();
        })
        document.getElementById('button3').addEventListener("click", function () {
            main1.addX('新增');
        })

        var main2 = new HxChartBar('main2', category, '显示极值:showExtreme');
        main2.init();
        for (var i = 0; i < 6; i++) {
            main2.putData('类目一', category[i], Math.ceil(Math.random() * 10));
            main2.putData('类目二', category[i], Math.ceil(Math.random() * 10));
        }
        main2.showExtreme();

        var main3 = new HxChartBar('main3', category, '显示极值:showAvarage');
        main3.init();
        for (var i = 0; i < 6; i++) {
            main3.putData('类目一', category[i], Math.ceil(Math.random() * 10));
            main3.putData('类目二', category[i], Math.ceil(Math.random() * 10));
        }
        main3.showAvarage();

        var main4 = new HxChartBar('main4', category, '修改字体:setSize');
        main4.init();
        for (var i = 0; i < 6; i++) {
            main4.putData('类目一', category[i], Math.ceil(Math.random() * 10));
        }
        main4.setSize('l');
        main4.showAvarage();
        main4.showExtreme();

        var main5 = new HxChartBar('main5', category, '修改字体:setSize');
        main5.init();
        for (var i = 0; i < 6; i++) {
            main5.putData('类目一', category[i], Math.ceil(Math.random() * 10));
        }
        main5.setSize('m');
        main5.showAvarage();
        main5.showExtreme();

        var main6 = new HxChartBar('main6', category, '修改字体:setSize');
        main6.init();
        for (var i = 0; i < 6; i++) {
            main6.putData('类目一', category[i], Math.ceil(Math.random() * 10));
        }
        main6.setSize('s');
        main6.showAvarage();
        main6.showExtreme();

        var main7 = new HxChartBar('main7', category);
        main7.init();
        for (var i = 0; i < 6; i++) {
            main7.putData('类目一', category[i], Math.ceil(Math.random() * 10));
        }
        main7.setTitle('修改标题:setTitle')

        var main8 = new HxChartBar('main8', category, '修改标题位置:setTitleLocation');
        main8.init();
        for (var i = 0; i < 6; i++) {
            main8.putData('类目一', category[i], Math.ceil(Math.random() * 10));
        }
        main8.setTitleLocation('l');
    </script>
</body>

</html>